<template>
  <uni-audio
    :id="id"
    :controls="!!controls"
    v-on="$listeners"
  >
    <audio
      ref="audio"
      :loop="loop"
      style="display:none;"
    />
    <div class="uni-audio-default">
      <div
        :style="'background-image: url('+$getRealPath(poster)+');'"
        class="uni-audio-left"
      >
        <div
          :class="{play:!playing,pause:playing}"
          class="uni-audio-button"
          @click="trigger"
        />
      </div>
      <div class="uni-audio-right">
        <div class="uni-audio-time">
          {{ currentTime }}
        </div>
        <div class="uni-audio-info">
          <div class="uni-audio-name">
            {{ name }}
          </div>
          <div class="uni-audio-author">
            {{ author }}
          </div>
        </div>
      </div>
    </div>
  </uni-audio>
</template>

<script>
import {
  subscriber
} from 'uni-mixins'

export default {
  name: 'Audio',
  mixins: [subscriber],
  props: {
    id: {
      type: String,
      default: ''
    },
    src: {
      type: String,
      default: ''
    },
    loop: {
      type: [Boolean, String],
      default: false
    },
    controls: {
      type: [Boolean, String],
      default: false
    },
    poster: {
      type: String,
      default: ''
    },
    name: {
      type: String,
      default: ''
    },
    author: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      playing: false,
      currentTime: this.getTime(0)
    }
  },
  watch: {
    src (val) {
      if (this.$refs.audio) {
        this.$refs.audio.src = this.$getRealPath(val)
      }
    }
  },
  mounted () {
    const audio = this.$refs.audio
    audio.addEventListener('error', $event => {
      this.playing = false
      this.$trigger('error', $event, {})
    })
    audio.addEventListener('play', $event => {
      this.playing = true
      this.$trigger('play', $event, {})
    })
    audio.addEventListener('pause', $event => {
      this.playing = false
      this.$trigger('pause', $event, {})
    })
    audio.addEventListener('ended', $event => {
      this.playing = false
      this.$trigger('ended', $event, {})
    })
    audio.addEventListener('timeupdate', $event => {
      var currentTime = audio.currentTime
      this.currentTime = this.getTime(currentTime)
      var duration = audio.duration
      this.$trigger('timeupdate', $event, {
        currentTime,
        duration
      })
    })
    audio.src = this.$getRealPath(this.src)
  },
  methods: {
    _handleSubscribe ({
      type,
      data = {}
    }) {
      var audio = this.$refs.audio
      switch (type) {
        case 'setSrc':
          audio.src = this.$getRealPath(data.src)
          this.$emit('update:src', data.src)
          break
        case 'play':
          audio.play()
          break
        case 'pause':
          audio.pause()
          break
        case 'seek':
          audio.currentTime = data.position
          break
      }
    },
    trigger () {
      if (this.playing) {
        this.$refs.audio.pause()
      } else {
        this.$refs.audio.play()
      }
    },
    getTime (time) {
      var h = Math.floor(time / 3600)
      var m = Math.floor(time % 3600 / 60)
      var s = Math.floor(time % 3600 % 60)
      h = (h < 10 ? '0' : '') + h
      m = (m < 10 ? '0' : '') + m
      s = (s < 10 ? '0' : '') + s
      var str = m + ':' + s
      if (h !== '00') {
        str = h + ':' + str
      }
      return str
    }
  }
}
</script>

<style>
uni-audio {
  display: none;
}

uni-audio[controls] {
  display: inline-block;
}

uni-audio[hidden] {
  display: none;
}

.uni-audio-default {
  max-width: 100%;
  min-width: 302px;
  height: 65px;
  background: #fcfcfc;
  border: 1px solid #e0e0e0;
  border-radius: 2.5px;
  display: inline-block;
  overflow: hidden;
}

.uni-audio-left {
  width: 65px;
  height: 65px;
  float: left;
  background-color: #e6e6e6;
  background-size: 100% 100%;
  background-position: 50% 50%;
}

.uni-audio-button {
  width: 24px;
  height: 24px;
  margin: 20.5px;
  background-size: cover;
}

.uni-audio-button.play {
  background-image: url();
}

.uni-audio-button.pause {
  background-image: url();
}

.uni-audio-right {
  box-sizing: border-box;
  height: 65px;
  margin-left: 65px;
  padding: 11px 16.5px 13.5px 15px;
  overflow: hidden;
}

.uni-audio-time {
  margin-top: 3.5px;
  height: 16.5px;
  font-size: 12px;
  color: #888888;
  float: right;
}

.uni-audio-info {
  margin-right: 70px;
  overflow: hidden;
}

.uni-audio-name {
  height: 22.5px;
  line-height: 22.5px;
  margin-bottom: 3.5px;
  font-size: 14px;
  color: #353535;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.uni-audio-author {
  height: 14.5px;
  line-height: 14.5px;
  font-size: 12px;
  color: #888888;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
